/**
 * 泛型函数组件
 */
import React, { memo } from 'react';

export interface ListProps<T> {
  title: string;
  list: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
}

export const List = memo(props => {
  const { title, list, renderItem } = props;
  return (
    <div>
      <h2>{title}</h2>
      {list &&
        list.length > 0 &&
        list.map((i, index) => {
          return renderItem(i, index);
        })}
    </div>
  );
}) as <T>(props: ListProps<T>) => React.ReactElement;

export default function() {
  return (
    <List
      title="Demo2列表"
      list={[1, 2, 3]}
      renderItem={i => {
        //自动推断i为number类型
        return <div>{i}</div>;
      }}
    />
  );
}
